import 'antd/dist/antd.css';
import { ClassifyModelState, useDispatch, useSelector} from 'umi';
import { useEffect } from 'react';

import './articleCord.less'
function StickyCardClassify() {
  // 通过useSelector获取model数据
  const classifyList = useSelector((state: { articleClassify: ClassifyModelState }) => state.articleClassify);
  // 通过useDispatch获取dispatch
  
  const dispatch = useDispatch();
  useEffect(() => {
    // 派发任务
    dispatch({
      type: 'articleClassify/getArticleClassify'
    })
  }, []);
  
  return <div className="stickyArticleClassify">
      <div className="stickyArticleClassifyTitle">
        <span>文章分类</span>
      </div>
        <div className="stickyArticleClassifyList">
        <ul>
            {
                classifyList.articleClassify.map((item,index)=>{
                    return <li key={index}>
                        <a href={`/category/${item.value}`}>
                            <span>{item.label}</span>
                            <span>共计 {item.articleCount} 篇文章</span>
                        </a>
                    </li>
                })
            }
        </ul>
      </div>
  </div>
}
export default StickyCardClassify